// 虚拟DOM树的VNODE
class Element {
    constructor(type,props,children) {
        this.type = type;
        this.props = props;
        this.children = children;
    }
}

function createElement(type,props,children) {
    return new Element(type,props,children);
}

function setAttr(node,key,value) {
    switch(key) {
        case 'value':
            // 作为表单的value
            if(node.tagName.toUpperCase() === 'INPUT' ||
            node.tagName.toUpperCase() === 'TEXTAREA'){
                node.value = value;
            }else {
                // 自定义属性 React组件props
                node.setAttribute(key,value);
            }
        break;
        case 'style':
            // 行内样式
            node.style.cssText = value;
        break;
        default: 
            node.setAttribute(key,value);
        break;
    }
}

function render(eleObj) { // 虚拟DOM -> 真实DOM需要的节点对象
    let el = document.createElement(eleObj.type);
    for(let key in eleObj.props) {
        // className css attr、key、props、onClick
        setAttr(el,key,eleObj.props[key]);
    }
    // 递归
    eleObj.children.forEach(child => {
        child = (child instanceof Element) 
        ? render(child)
        : document.createTextNode(child) // 叶子节点
        // 挂载
        el.appendChild(child)
    })
    return el;
}
function renderDOM(el,target) {
    // ReactDOM
    target.appendChild(el);
    // console.log(el,target)
}

export { 
    createElement,
    render,
    renderDOM,
    setAttr,
    Element 
}